<template>
  <div class="user-edit">
    <!-- Drawer抽屉 -->
    <Drawer :title="title" v-model="visible" width="720" draggable :mask-closable="type=='0'">
      <div :style="{maxHeight: maxHeight}" class="drawer-content">
        <Form ref="form" :model="form" :rules="formValidate" label-position="top">
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="事故企业名称" prop="enterpriseName">
                <Input v-model="form.enterpriseName" />
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="事故所在地" prop="site">
                <Input v-model="form.site" />
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="事故发生时间" prop="time">
                <Date-picker 
                  type="datetime" 
                  placeholder="选择日期和时间" 
                  style="width: 200px"
                  @on-change="changeTime"
                  :value="form.time"
                ></Date-picker>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="事故死亡人数" prop="deathToll">
                <Input-number :min="0" v-model="form.deathToll"></Input-number>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="事故受伤人数" prop="injuryNum">
                <Input-number :min="0" v-model="form.injuryNum"></Input-number>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="事故企业类型" prop="enterpriseType">
                <Select v-model="form.enterpriseType" placeholder="请选择" clearable>
                  <Option value="有限责任公司">有限责任公司</Option>
                  <Option value="无限责任公司">无限责任公司</Option>
                  <Option value="股份公司">股份公司</Option>
                  <Option value="集体所有制">集体所有制</Option>
                  <Option value="股份合作制">股份合作制</Option>
                  <Option value="有限合伙企业">有限合伙企业</Option>
                  <Option value="普通合伙企业">普通合伙企业</Option>
                  <Option value="其它">其它</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="事故类型" prop="accidentCaseType">
                <Select v-model="form.accidentCaseType" placeholder="请选择" clearable>
                  <Option value="物体打击">物体打击</Option>
                  <Option value="容器爆炸">容器爆炸</Option>
                  <Option value="车辆伤害">车辆伤害</Option>
                  <Option value="起重伤害">起重伤害</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <FormItem label="事故概况" prop="generalSituation">
            <Input v-model="form.generalSituation" type="textarea" />
          </FormItem>
          <FormItem label="事故图片" prop="pics">
            <upload-pic-thumb
                @on-change="form.pics=$event" 
                style="width:100%" 
                ref="uploadPics"
            ></upload-pic-thumb>
          </FormItem>
        </Form>
      </div>
      <div class="drawer-footer br" v-show="type!=='0'">
        <Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
        <Button @click="visible = false">取消</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import { createOrUpdateAccidentCase } from "@/api/index";
import uploadPicThumb from "@/views/my-components/xboot/upload-pic-thumb";
export default {
  name: "notice",
  components: {
    uploadPicThumb
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    },
    type: {
      type: String,
      default: "0"
    }
  },
  data() {
    return {
      visible: this.value,
      title: "",
      submitLoading: false,
      maxHeight: 510,
      form: {},
      formValidate: {
        // 表单验证规则
        site: [{ required: true, message: "请输入事故所在地", trigger: "blur" }],
        enterpriseName: [
          { required: true, message: "请输入事故所在地", trigger: "blur" }
        ],
        time: [
          { required: true, message: "请输入事故发生时间", trigger: "change" }
        ],
        deathToll: [
          { required: true, type: "number", message: "人数必须是整数", trigger: "blur" }
        ],
        injuryNum: [
          { required: true,type: "number", message: "人数必须是整数", trigger: "blur" }
        ],
        enterpriseType: [
          { required: true, message: "请选择事故企业类型", trigger: "change" }
        ],
        accidentCaseType: [
          { required: true, message: "请选择事故类型", trigger: "change" }
        ],
        generalSituation: [
          { required: true, message: "请输入事故概况", trigger: "blur" }
        ],
      },
    };
  },
  methods: {
    init() {

    },
    changeTime(event) {
      this.form.time = event;
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.type === "1") {
            // 编辑
            let temp = this.$refs.uploadPics.uploadList;
            let array = []
            temp.forEach(element => {
              array.push(element.url)
            })
            this.form.pics = array.join(',')
            this.submitLoading = true;
            createOrUpdateAccidentCase(this.form).then(res => {
              this.submitLoading = false;
              if (res.success) {
                this.$Message.success("操作成功");
                this.$emit("on-submit", true);
                this.visible = false;
              }
            });
          } else {
            // 添加
            delete this.form.id;
            let temp = this.$refs.uploadPics.uploadList;
            let array = []
            temp.forEach(element => {
              array.push(element.url)
            })
            this.form.pics = array.join(',')
            this.submitLoading = true;
            createOrUpdateAccidentCase(this.form).then(res => {
              this.submitLoading = false;
              if (res.success) {
                this.$Message.success("操作成功");
                this.$emit("on-submit", true);
                this.visible = false;
              }
            }).catch(err => {
                console.log(err)
            })
          }
        }
      });
    },
    setCurrentValue(value) {
      if (value === this.visible) {
        return;
      }
      if (this.type === "1") {
        this.title = "编辑事故案例";
        this.maxHeight = "100%";
        // this.maxHeight = Number(document.documentElement.clientHeight - 121) + "px";
      } else if (this.type === "2") {
        this.title = "添加事故案例";
        this.maxHeight = "100%";
      } else {
        this.title = "岗位事故案例";
        this.maxHeight = "100%";
      }
      // 清空数据
      this.$refs.form.resetFields();
      if (this.type === "0" || this.type === "1") {
        // 回显数据
        let data = this.data;
        console.log(this.data)
        // 回显
        this.$refs.uploadPics.uploadList = [];
        this.form = data;
        this.$refs.uploadPics.setData(data.pics)

        // 保证人数是整数型
        this.form.deathToll = Number(data.deathToll)
        this.form.injuryNum = Number(data.injuryNum)
      } else {
        this.form = {
          site: "",
          enterpriseName: '',
          time: '',
          deathToll: 0,
          type: 1,
          injuryNum: 0,
          enterpriseType: '',
          accidentCaseType: '',
          generalSituation: ''
        };
      }
      this.visible = value;
    }
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    }
  },
  mounted() {
  }
};
</script>

<style lang="less">
@import "../../../styles/table-common.less";
.drawer-content {
  overflow: auto;
}
.drawer-content::-webkit-scrollbar {
  display: none;
}
.user-title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  .info-title {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    display: block;
    margin-right: 16px;
  }
}
.info-header {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  display: block;
  margin-bottom: 16px;
}
</style>

